{% extends "htmlPages/base.html" %}
        {% block head %}
            <script type="text/javascript">
                function markTrue(child_id){
                    $('#'+child_id).prop("checked", true);
                    $('#div'+child_id).addClass('border-highlight');
                }
                function markFalse(child_id){
                    $('#'+child_id).prop("checked", false);
                    $('#div'+child_id).removeClass('border-highlight');
                }
               function toggleChild(child_id) {
                    if($('#'+child_id).is(":checked"))  
                        markFalse(child_id);
                    else
                        markTrue(child_id);
                } 
                
                $(document).ready(function(){
                    // Listen for click on toggle checkbox
                    $('#select-all').click(function(event) {  
                        console.log('click');
                        var selected = this.checked;
                        // Iterate each checkbox
                        if(this.checked){
                            $(':checkbox').each(function () {
                                var child_id = this.value;
                                markTrue(child_id);
                            });
                        }
                        else{
                            $(':checkbox').each(function () {
                                var child_id = this.value;
                                markFalse(child_id);
                            });
                        }
                    });
                });
            </script>
            <style type="text/css">
             .panel:hover {
                cursor:pointer;
             }
            .border-highlight {
              box-shadow: 0 0 25px rgba(81, 203, 238, 1);
/*              box-shadow: 0 0 25px #33CC33;*/
            }   
            </style>
        {% endblock head %}

        {% block side_navbar %}
          <ul class="nav navbar-nav side-nav">
            <li class="active">
              <a href="/home"><i class="fa fa-desktop"></i>  דף בית </a>
            </li>
            <li>
              <a href="/messages"><i class="fa fa-bullhorn"></i>  לוח מודעות </a>
            </li>
            <li>
              <a href="/privateMessages"><i class="fa fa-edit"></i>  הודעות אישיות </a>
            </li>
            <li>
              <a href="/contactList"><i class="fa fa-file"></i>  דף קשר </a>
            </li>
          </ul>
        {% endblock side_navbar %}

        {% block page_wrapper %}
            <div class="row">
              <div class="col-lg-12">
                <h1>נוכחות
                    <small> {{ date }} </small>
                  </h1>
                  <br>
              </div>
            </div>




        <form name="attendance" action="/editAtt" method="post">
            
            <div class="row">
                <div class="col-lg-12 pull-right">
                   <p>
                    <!-- select all boxes -->
                    <input type="checkbox" name="select-all" id="select-all">                    
                       <label for="select-all"> סמני את כולם</label> 
                    </input>
                  </p>
                </div>
            </div>
                 
        {%- set counter = 0 -%}
        {%- set flag = [] -%}
{%- for child in children %}
  {%- if counter%6 == 0 %}
       {%- do flag.append(1) -%}
        <div class="row">
       {% endif -%}
          <div class="col-md-2 pull-right">
          {%- if arrived[child.child_id] == 1 %}
            <div class="panel panel-success" id="div{{ child.child_id}}" onclick="toggleChild({{ child.child_id }})">
          {% else %}
            <div class="panel panel-danger" id="div{{ child.child_id}}" onclick="toggleChild({{ child.child_id }})">
          {% endif -%}
              <div class="panel-heading">
                <div class="row">
                  <div class="col-xs-6 pull-left">
<!--                    <img src="static/avatars/{{ child.child_id }}.png" alt="{{ child.child_id }}" class="img-rounded pull-left"></div>-->
                  <img src="static/img/default.jpg" alt="{{ child.child_id }}" class="img-rounded pull-left">                  </div>
                  <div class="col-xs-6 text-right">
                    <p class="announcement-heading unselectable">{{ child.first_name }}<br>{{ child.last_name }}</p>
                  </div>
                </div>
              </div>
              <div class="panel-footer announcement-bottom">
                <div class="row">
                    <div class="col-xs-6 pull-right">
                        <input name="att" type="checkbox" id="{{ child.child_id }}" value="{{ child.child_id }}" onclick="toggleChild({{ child.child_id }})" style="cursor:pointer">
                    </div>
                    <div class="col-xs-6 text-left pull-left">
                        <label><!-- for="{{ child.child_id }}">-->
                            <p class="announcement-text unselectable" style="cursor:pointer">
        נוכח?
                            </p>
                        </label>
                    </div>
                </div>
               </div>
             </div>
          </div>
  {%- if counter%6 == 5 %}
     {%- do flag.append(0) -%}
       </div>
  {% endif -%}
  {%- set counter = counter + 1 -%}
            
            {%- if arrived[child.child_id] == 1 %}
            <script type="text/javascript">
                markTrue({{ child.child_id }});
            </script>
            {%- else %}
            <script type="text/javascript">
                markFalse({{ child.child_id }});
            </script>
            {% endif -%}
{% endfor -%}
        {%- if flag %}
          </div>
        {% endif -%}
            <button type="submit" class="btn btn-success">
                            עדכן נוכחות
            </button>
        </form>
      </div>


        {% endblock page_wrapper %}
